<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE html>
<html>
<head>
    <title>襄阳蓝芯智能化办公系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="${pageContext.request.contextPath}/static/bootstrap-3.3.5/css/bootstrap.css" rel="stylesheet">
    <style>
        /*定义类名为.thead-blue的样式*/
        .thead-blue {
            color: #fff;
            font-weight: bold;
            background-color: #337ab7;
        }
    </style>
</head>
<body>

<div class="panel panel-primary">
    <table class="table table-bordered table-hover">
        <thead>
        <tr class="thead-blue">
            <td colspan="4">报销申请单详情</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td class="col-md-2"><label>申请单号</label></td>
            <td class="col-md-4" >${bxInformal.docNo}</td>
            <td class="col-md-2"><label>审批流程</label></td>
            <td class="col-md-4" >${flowName}</td> <!-- 需后端传递flowName -->
        </tr>
        <tr>
            <td><label>创建人</label></td>
            <td >${creatorName}</td> <!-- 需后端传递creatorName -->
            <td><label>单据类型</label></td>
            <td >${bxInformal.doctype}</td>
        </tr>
        <tr>
            <td><label>申请人</label></td>
            <td >${proposerName}</td> <!-- 需后端传递proposerName -->
            <td><label>申请时所在部门</label></td>
            <td >${deptName}</td> <!-- 需后端传递deptName -->
        </tr>
        <tr>
            <td><label>申报金额</label></td>
            <td >${bxInformal.applyAmount}</td>
            <td><label>实报金额</label></td>
            <td >${bxInformal.bookAmount}</td>
        </tr>
        <tr>
            <td><label>创建时间</label></td>
            <td>
                <fmt:formatDate value="${createDate}" pattern="yyyy-MM-dd HH:mm:ss" />
            </td>
            <td><label>提交时间</label></td>
            <td>
                <fmt:formatDate value="${submitDate}" pattern="yyyy-MM-dd HH:mm:ss" />
            </td>
        </tr>
        <tr>
            <td><label>领款人</label></td>
            <td >${payeeName}</td>
            <td><label>领款登记人</label></td>
            <td >${bookerName}</td>
        </tr>
        <tr>
            <td><label>领款时间</label></td>
            <td>
                <fmt:formatDate value="${bookDate}" pattern="yyyy-MM-dd HH:mm:ss" />
            </td>
            <td><label>单据状态</label></td>
            <td ><c:choose>
                <c:when test="${bxInformal.status == 'W'}">未提交</c:when>
                <c:when test="${bxInformal.status == 'O'}">审批中</c:when>
                <c:when test="${bxInformal.status == 'Y'}">审批通过</c:when>
                <c:when test="${bxInformal.status == 'N'}">审批不通过</c:when>
                <c:when test="${bxInformal.status == 'S'}">已领款</c:when>
                <c:otherwise>${bxInformal.status}</c:otherwise>
            </c:choose></td>
        </tr>
        <tr>
            <td><label>申请事由</label></td>
            <td colspan="3">${bxInformal.reason}</td>
        </tr>

        <c:if test="${bxInformaldetails != null and not bxInformaldetails.isEmpty()}">
        <tr class="thead-blue">
            <td colspan="4">报销明细</td>
        </tr>
            <c:forEach items="${bxInformaldetails}" var="detail" varStatus="status">
                <tr>
                    <td><label>报销类型${status.index + 1}</label></td>
                    <td>${typeMap[detail.typeid]}</td>
                    <td><label>申报金额</label></td>
                    <td>${detail.applyAmount}</td>
                </tr>
            <%-- 实报总金额行 --%>
            <tr>
                <td><label>实报金额</label></td>
                <td colspan="3">${detail.amount}</td>
            </tr>
            </c:forEach>
        </c:if>

        <%-- 附件区域（仅在有附件时显示） --%>
        <c:if test="${bxInformalaccessaries != null and not bxInformalaccessaries.isEmpty()}">
            <tr class="thead-blue">
                <td colspan="4">附件</td>
            </tr>

            <%-- 循环遍历附件列表 --%>
            <c:forEach items="${bxInformalaccessaries}" var="accessory" varStatus="status">
                <tr>
                    <td><label>附件${status.index + 1}</label></td>
                    <td>
                        <!-- 图片预览 -->
                        <c:if test="${accessory.content.endsWith('.jpg') or accessory.content.endsWith('.png')}">
                            <img src="${pageContext.request.contextPath}/bx-informal/showImage?oid=${accessory.oid}"
                                 style="width: 100px; height: auto; margin-right: 10px;" alt="附件图片">
                        </c:if>
                        <!-- 下载链接 -->
                        <a href="${pageContext.request.contextPath}/bx-informal/downloadAccessory?oid=${accessory.oid}">
                                ${accessory.description}（点击下载）
                        </a>
                    </td>

                    <td><label>附件描述</label></td>
                    <td>${accessory.description != null ? accessory.description : ''}</td>
                </tr>
            </c:forEach>
        </c:if>
        <tr>
            <td colspan="4" align="center">
                <a type="button" href="javascript:history.back()" class="btn btn-info">返回</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>






<script type="text/javascript">
    $(document).ajaxError(function(event,xhr) {
        if(xhr.status=="403"){//没有权限
            document.location.href = xhr.getResponseHeader("url");
        }else if(xhr.status!="200"){
            //alert("服务器错误!");
            console.log("服务器错误!");
        }
    });
</script>
</body>
</html>
